<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('xPot.quick Search Fields') })"
        >
        <el-button v-blur class="table-header-operate" 
        type="primary" 
        :disabled="baTable.table.data?.length==0" 
        style="margin-left: 12px"
        @click="handleExport">
            <span class="table-header-operate-text" >导出数据</span>
        </el-button>
        </TableHeader>
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { xPot ,codelib } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import fileDownload from 'js-file-download'


const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(["edit","delete"])
const baTable = new baTableClass(
    new baTableApi(xPot),
    {
        pk: 'TCNO',
        column: [
            { type: 'selection', align: 'center', operator: false },
            // { label: t('xPot.ID'), prop: 'ID', align: 'center', operator: 'RANGE' },
            { label: t('xPot.TCNO'), prop: 'TCNO', align: 'center', },
            { label: t('xPot.OWER'), prop: 'OWER', align: 'center',operator: false },
            { label: t('xPot.LEASEHOLDER'), prop: 'LEASEHOLDER', align: 'center',show:false },
            //种类
            { label: t('xPot.KIND'), prop: 'KIND', align: 'center',operator:false
            },
            { label: t('xPot.STATUS'), prop: 'STATUS', align: 'center',operator:false},
            { label: t('xPot.QZDATE'), prop: 'QZDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 ,show:false},
            { label: t('xPot.TIMELIMIT'), prop: 'TIMELIMIT', align: 'center',sortable: 'custom', operator: false,show:false, },
            { label: t('xPot.DAILYRENT'), prop: 'DAILYRENT', align: 'center',sortable: 'custom', operator: false,show:false },
            { label: t('xPot.MONEYTYPE'), prop: 'MONEYTYPE', align: 'center',show:false,operator: false },
            { label: t('xPot.TZDATE'), prop: 'TZDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160,show:false },
            { label: t('xPot.BFDATE'), prop: 'BFDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160,show:false },
            { label: t('xPot.SELLDATE'), prop: 'SELLDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160, show:false},
            { label: t('xPot.MANUFACTURER'), prop: 'MANUFACTURER', align: 'center',show:false ,operator:false},
            { label: t('xPot.CAPACITY'), prop: 'CAPACITY', align: 'center',show:false,operator:false },
            { label: t('xPot.TARE'), prop: 'TARE', align: 'center', operator: false,show:false },
            { label: t('xPot.TANKCODE'), prop: 'TANKCODE', align: 'center',show:false,operator: false },
            { label: t('xPot.FRAMETYPE'), prop: 'FRAMETYPE', align: 'center',show:false,operator: false },
            { label: t('xPot.WALKTYPE'), prop: 'WALKTYPE', align: 'center',show:false,operator: false },
            { label: t('xPot.SCCG'), prop: 'SCCG', align: 'center',show:false,operator: false },
            { label: t('xPot.HXGDF'), prop: 'HXGDF', align: 'center' ,show:false,operator: false},
            { label: t('xPot.TQF'), prop: 'TQF', align: 'center',show:false,operator: false },
            { label: t('xPot.BK1'), prop: 'BK1', align: 'center',show:false ,operator: false},
            { label: t('xPot.BK2'), prop: 'BK2', align: 'center',show:false ,operator: false},
            { label: t('xPot.AQF'), prop: 'AQF', align: 'center',show:false ,operator: false},
            { label: t('xPot.AQFBK'), prop: 'AQFBK', align: 'center',show:false ,operator: false},
            { label: t('xPot.DFTYPE'), prop: 'DFTYPE', align: 'center',show:false ,operator: false},
            { label: t('xPot.HOTTYPE'), prop: 'HOTTYPE', align: 'center',show:false ,operator: false},
            { label: t('xPot.IIC'), prop: 'IIC', align: 'center', render: 'datetime', sortable: 'custom', operator: false, width: 160 ,show:false },
            { label: t('xPot.ZZDATE'), prop: 'ZZDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: false, width: 160,show:false  },
            { label: t('xPot.JRPMJ'), prop: 'JRPMJ', align: 'center',show:false ,operator: false},
            { label: t('xPot.BWCLX'), prop: 'BWCLX', align: 'center',show:false,operator: false },
            { label: t('xPot.GTCL'), prop: 'GTCL', align: 'center',show:false ,operator: false},
            { label: t('xPot.ZDXKZZ'), prop: 'ZDXKZZ', align: 'center',show:false ,operator: false},
            { label: t('xPot.ZZ'), prop: 'ZZ', align: 'center',show:false ,operator: false},
            { label: t('xPot.ZDYL'), prop: 'ZDYL', align: 'center' ,show:false,operator: false},
            { label: t('xPot.SYYL'), prop: 'SYYL', align: 'center',show:false ,operator: false},
            { label: t('xPot.TANKSIZE'), prop: 'TANKSIZE', align: 'center',show:false ,operator: false},
            { label: t('xPot.GTNCC'), prop: 'GTNCC', align: 'center',show:false ,operator: false},
            { label: t('xPot.GTSJWD'), prop: 'GTSJWD', align: 'center' ,show:false,operator: false},
            { label: t('xPot.RZCJS'), prop: 'RZCJS', align: 'center',show:false ,operator: false},
            { label: t('xPot.FSLG'), prop: 'FSLG', align: 'center',show:false ,operator: false},
            { label: t('xPot.GPS'), prop: 'GPS', align: 'center',show:false },
            { label: t('xPot.GXCGQPZ'), prop: 'GXCGQPZ', align: 'center' ,show:false,
                comSearchRender: 'remoteSelect', remote: {
                    pk: 'code',
                    field: 'codename',
                    remoteUrl: codelib + 'now?where=cgqpz'}
            },
            { label: t('xPot.GXJRFS'), prop: 'GXJRFS', align: 'center',show:false,
                comSearchRender: 'remoteSelect', remote: {
                    pk: 'code',
                    field: 'codename',
                    remoteUrl: codelib + 'now?where=jrfs'}
            },
            { label: t('xPot.OP'), prop: 'OP', align: 'center',show:false ,operator: false},
            { label: t('xPot.OPTIME'), prop: 'OPTIME', align: 'center', render: 'datetime', sortable: 'custom', operator: false, width: 160,show:false },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'ID', order: 'desc' },
        // defaultOrder: undefined,
    },
    {
        defaultItems: [],
    }
)

provide('baTable', baTable)
const state = reactive({
    kindList:[],
    statusList:[]
})

onMounted(() => {
    // getStatusList()
    // getKindList()
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

const getKindList = ()=>{
    createAxios({
        url:codelib + 'now?where=potkind',
        method:'get',
    }).then((res:any)=>{
        state.kindList = res.data.list
    })
} 
const getStatusList = ()=>{
    createAxios({
        url:codelib + 'now?where=potstatus',
        method:'get',
    }).then((res:any)=>{
        state.statusList = res.data.list
    })
} 


const handleExport = (item:any)=>{
    createAxios({
        url:"/admin/XPot/out",
        method: 'get',
        params: baTable.table.filter,
        responseType:'blob'
    },
    { reductDataFormat: false }
    ).then((response:any)=>{
        fileDownload(response.data, '罐箱基本信息.xlsx')
    })
}


</script>

<script lang="ts">
import { defineComponent } from 'vue'
import createAxios from '/@/utils/axios'
export default defineComponent({
    name: 'xPot',
})
</script>

<style scoped lang="scss"></style>
